<template>
  <div>
    <div id="province" style="width: 600px; height: 600px"></div>
  </div>
</template>

<script setup>
import { onMounted, watch } from 'vue'
import { init, registerMap } from 'echarts'
import { ref } from 'vue'

const props = defineProps({
  fileName: String
})
const emit = defineEmits(['toMap'])

const option = ref({
  series: [
    {
      name: '省份数据',
      type: 'map',
      map: 'province',
      data: []
    }
  ]
})

const initData = async () => {
  try {
    const provinceJSON = await import(`../data/province/${props.fileName}.json`)
    const myChart = init(document.getElementById('province'))
    registerMap('province', provinceJSON.default || provinceJSON)
    myChart.setOption(option.value)
    myChart.on('click', () => emit('toMap'))
  } catch (e) {
    alert(`暂无${props.fileName}数据`)
    emit('toMap')
  }
}

onMounted(initData)
watch(() => props.fileName, initData)
</script>

<style scoped></style>
